<script setup>
  import { onMounted, ref } from 'vue'
  import { onLoad } from '@dcloudio/uni-app'
  import { http } from '@/utils/http.js'
  import { useUsercodeStore } from '@/store/usercode.js'

  const username = ref('')
  const mobile = ref('')
  const addressdetail = ref('')
  // 是否默认
  const isMr = ref(0)
  const addressId = ref(-1)
  const addressInfo = ref([])
  const dataTree = ref()

  async function getAddress() {
    const res = await http.request({
      url: '/api/address/getAddress',
      method: 'POST',
      data: {},
    })
    dataTree.value = res.data
  }
  const provinceId = ref('')
  const cityId = ref('')
  const areaId = ref('')
  function onchange(e) {
    console.log(e.detail.value[0])
    provinceId.value = e.detail.value[0].value
    cityId.value = e.detail.value[1].value
    areaId.value = e.detail.value[2].value
  }

  //姓名长度提示
  function namelength() {
    if (username.value.length < 2) {
      uni.utils.toast('姓名长度限制2-8位字符')
    } else if (username.value.length > 8) {
      uni.utils.toast('姓名长度限制2-8位字符')
    }
  }

  function setMr() {
    if (isMr.value == 1) {
      isMr.value = 0
    } else {
      isMr.value = 1
    }
  }

  async function set() {
    const res = await http.request({
      url: '/api/address/addAddress',
      method: 'POST',
      data: {
        name: username.value,
        province_id: provinceId.value,
        city_id: cityId.value,
        area_id: areaId.value,
        is_mr: isMr.value,
        mobile: mobile.value,
        address: addressdetail.value,
      },
    })
    if (res.st == 1) {
      const userCodeStore = useUsercodeStore()
      userCodeStore.setAddress(1)
      uni.navigateBack({ delta: 1 })
    } else {
      uni.utils.toast(res.msg)
    }
  }

  async function edit() {
    const res = await http.request({
      url: '/api/address/editAddress',
      method: 'POST',
      data: {
        name: username.value,
        province_id: provinceId.value,
        city_id: cityId.value,
        area_id: areaId.value,
        is_mr: isMr.value,
        mobile: mobile.value,
        address: addressdetail.value,
        id: addressId.value,
      },
    })
    if (res.st == 1) {
      uni.navigateBack({ delta: 1 })
    } else {
      uni.utils.toast(res.msg)
    }
  }

  function setAddress() {
    if (username.value == '') {
      uni.utils.toast('请填写姓名')
      return
    }
    if (mobile.value == '') {
      uni.utils.toast('请填写手机号')
      return
    }
    if (provinceId.value == '' || cityId.value == '' || areaId.value == '') {
      uni.utils.toast('请选择所在地区')
      return
    }
    if (addressdetail.value == '') {
      uni.utils.toast('请填写详细地址')
      return
    }
    if (username.value.length < 2) {
      uni.utils.toast('姓名长度限制2-8位字符')
      return
    } else if (username.value.length > 8) {
      uni.utils.toast('姓名长度限制2-8位字符')
      return
    }
    if (addressId.value == -1) {
      set()
    } else {
      edit()
    }
  }
  onMounted(() => {
    getAddress()
  })
  onLoad((option) => {
    if (option.info) {
      console.log(JSON.parse(decodeURIComponent(option.info)))
      provinceId.value = JSON.parse(decodeURIComponent(option.info)).province_id
      username.value = JSON.parse(decodeURIComponent(option.info)).name
      cityId.value = JSON.parse(decodeURIComponent(option.info)).city_id
      areaId.value = JSON.parse(decodeURIComponent(option.info)).area_id
      isMr.value = JSON.parse(decodeURIComponent(option.info)).is_mr
      mobile.value = JSON.parse(decodeURIComponent(option.info)).mobile
      addressdetail.value = JSON.parse(decodeURIComponent(option.info)).address
      addressId.value = JSON.parse(decodeURIComponent(option.info)).id
      addressInfo.value = [provinceId.value, cityId.value, areaId.value]
    }
  })
</script>

<template>
  <view>
    <!-- //列表 -->
    <view class="item-list">
      <view class="list1">
        <view class="name-left">收货人</view>
        <view class="name-right">
          <input
            style="font-size: 24rpx"
            type="text"
            maxlength="8"
            v-model="username"
            placeholder-class="cl"
            placeholder="姓名"
            @blur="namelength"
          />
        </view>
      </view>

      <view class="list1">
        <view class="name-left">手机号</view>
        <view class="name-right">
          <input
            type="number"
            style="font-size: 24rpx"
            maxlength="11"
            v-model="mobile"
            placeholder-class="cl"
            placeholder="手机号"
          />
        </view>
      </view>

      <view class="list1">
        <view class="name-left">所在地区</view>
        <view class="name-right" style="margin-left: 32rpx">
          <uni-data-picker
            placeholder="省、市、区"
            popup-title="请选择地址"
            :clear-icon="false"
            :map="{ text: 'name', value: 'id' }"
            :localdata="dataTree"
            v-model="addressInfo"
            @change="onchange"
          >
          </uni-data-picker>
        </view>
      </view>

      <view class="list1">
        <view class="name-left">详细地址</view>
        <view class="name-right">
          <input
            type="text"
            maxlength="60"
            style="font-size: 24rpx"
            v-model="addressdetail"
            placeholder-class="cl"
            placeholder="如小区、楼栋号、门牌号等"
          />
        </view>
      </view>
      <view
        class="list1"
        style="
          display: flex;
          align-items: center;
          justify-content: space-between;
        "
      >
        <view class="name-left">设为默认地址</view>
        <view class="name-right">
          <switch
            :checked="isMr == 1"
            @change="setMr"
            color="#FFE60F"
            style="transform: scale(0.7)"
          />
        </view>
      </view>
      <view style="margin-left: 30rpx; font-size: 20rpx; color: #9b9b9d">
        提醒：下单会优先使用默认地址
      </view>
    </view>
    <!-- 默认按钮 -->
    <view class="btn"></view>
    <!-- //新增按钮 -->
    <view class="save-btn" @click="setAddress()">保存地址</view>
  </view>
</template>

<style lang="scss" scoped>
  page {
    height: 100vh;
    background-color: #fff;
  }

  .item-list {
    /* display: flex; */
    width: 100vw;
  }
  ::v-deep .input-value-border {
    border: none !important;
  }
  .list1 {
    height: 90rpx;
    box-sizing: border-box;
    flex-direction: inherit;

    display: flex;
    margin-top: 30rpx;
    /* background-color: #ddd; */
    /* width: 100%; */
    align-items: center;
    font-family: OPPOSans;
    font-weight: 500;
    font-size: 30rpx;
    color: #3d3d3d;
    margin-left: 30rpx;
    padding-bottom: 40rpx;
    border-bottom: 1rpx solid #f5f5f5;
  }
  .name-left {
    width: 150rpx !important;
    margin-top: 30rpx;
    font-size: 24rpx;
    /* margin-left: 30rpx; */
  }
  .name-right {
    margin-top: 30rpx;
    margin-left: 50rpx;
    color: #3d3d3d;
    font-size: 30rpx;
    font-weight: 400;
  }
  .c1 {
    color: #b1b0b8;
  }
  .save-btn {
    width: 90%;
    height: 90rpx;
    background-color: $all-color;
    position: fixed;
    left: 50%;
    transform: translate(-50%);
    bottom: 100rpx;
    color: #3d3d3d;
    font-size: 30rpx;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50rpx;
    position: fixed;
    // font-family: OPPOSans;
    font-weight: 600;
  }
</style>
